<template>
  <div class="feedbackList">
    <div class="title-box">
      <div class="title-item" @click="changeType(1)">
        <div :class="modeType == 1?'text-highLight':'text'">故障反馈</div>
      </div>
      <div class="title-item" @click="changeType(2)">
        <div :class="modeType == 2?'text-highLight':'text'">地点报错</div>
      </div>
    </div>
    <div class="line-box">
      <div class="left" :style="modeType== 1?'width:1.5rem;':'width:6.5rem'"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="list_view" ref="warpper">
      <div>
        <div class="list" v-for="(item,index) in list" :key="index" @click="goToDetail(item.id)">
          <div class="left">
            <div class="title">{{ item.class}}</div>
            <div class="content">
              <div class="item">
                <i class="iconfont icon-dizhi icon"></i>
                <span class="address">{{item.address}}</span>
              </div>
              <div class="item" v-if="modeType == 1">
                <i class="iconfont icon-chatouhao icon"></i>
                <span class="chatou">{{item.s_code}}号</span>
                <span class="chatou_txt">插头</span>
              </div>
            </div>
          </div>
          <i class="iconfont icon-xiangxia right_icon"></i>
        </div>
      </div>
      <div class="nothing-contant" v-if="list.length<=0">
        <img :src="nothing" alt>
        <div class="text">暂无反馈信息</div>
      </div>
    </div>
  </div>
</template>
   
<style lang="less" scoped>
@import "index.less";
</style>

<script>
import BScroll from "better-scroll";
export default {
  name: "feedbackList",
  data() {
    return {
      charging_icon1: require("../../../assets/images/charging_icon1.png"),
      charging_icon2: require("../../../assets/images/charging_icon2.png"),
      modeType: 1,
      page: 1,
      list: {},
      scroll: {},
      lock: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    changeType(index) {
      this.modeType = index;
      this.getList();
    },
    goToDetail(id) {
      this.$router.push({
        path: "/FeedbackDetail",
        query: {
          type: this.modeType,
          id: id
        }
      });
    },
    getList() {
      this.page = 1;
      this.$dialog.loading.open("正在加载");
      if (this.modeType == 1) {
        this.$http
          .get("/repair/List", {
            params: {
              page: this.page
            }
          })
          .then(res => {
            this.list = res.data.data;
            this.scrollInit();
            this.$dialog.loading.close();
          });
      } else {
        this.$http
          .get("/error/List", {
            params: {
              page: this.page
            }
          })
          .then(res => {
            this.list = res.data.data;
            this.scrollInit();
            this.$dialog.loading.close();
          });
      }
    },
    scrollInit() {
      this.scroll = new BScroll(this.$refs.warpper, {
        click: true,
        pullUpLoad: {
          threshold: -50
        }
      });
      this.scroll.on("pullingUp", () => {
        if (this.lock) {
          return;
        }
        // 页数加一
        this.page++;
        // 锁定防止多次加载
        this.lock = true;
        this.$dialog.loading.open("正在加载");
        let url = "";
        if (this.modeType == 1) {
          url = "/repair/List";
        } else {
          url = "/error/List";
        }
        this.$http
          .get(url, {
            params: {
              page: this.page
            }
          })
          .then(res => {
            this.list = this.list.concat(res.data.data);
            this.$forceUpdate();
            this.scroll.finishPullUp();
            this.scroll.refresh();
            this.$dialog.loading.close();
            if (res.data.data.length <= 0) {
              this.$dialog.toast({
                mes: "没有更多的数据",
                timeout: 1500,
                icon: "none"
              });
              this.lock = true;
            } else {
              // 解锁上拉
              this.lock = false;
            }
          });
      });
    }
  },
  components: {}
};
</script>
